<template>
  <div class='container'>
    <el-card class="box-card">
      <el-row class="top">
        <div class="top_left">
          <strong class="title">目录名称</strong>
            <el-input v-model="input" class="top_ipt"></el-input>

            <strong class="title">状态</strong>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button class="del" size="small" @click="clearInput">清除</el-button>
            <el-button type="primary" size="small" @click="searchBtn">搜索</el-button>
        </div>
        <div class="top_right">
          <el-button v-if="$route.query.id" @click="$router.back()" type="text" size="small" icon="el-icon-back">返回学科</el-button>
          <el-button type="success" icon="el-icon-edit" size="small" @click="addDirectorys">新增目录</el-button>
        </div>
      </el-row>
      <el-row class="content">
        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          :closable="false"
          show-icon>
        </el-alert>
      </el-row>
      <el-row style="margin-top:20px">
        <!-- 表格 -->
        <el-table
            :data="directoryList"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="80">
            </el-table-column>
            <el-table-column
              prop="subjectName"
              label="所属学科"
              width="120">
            </el-table-column>
            <el-table-column
              prop="directoryName"
              label="目录名称">
            </el-table-column>
            <el-table-column
              prop="username"
              label="创建者">
            </el-table-column>
            <el-table-column
              label="创建日期">
              <template #default="{row}">
                {{formatTime(row.addData)}}
              </template>
            </el-table-column>
            <el-table-column
              prop="totals"
              label="面试题数量">
            </el-table-column>
            <el-table-column
              label="状态">
              <template #default="{row}">
                {{row.state === 0 ? '已禁用' : '已启用'}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template #default="{row}">
                <el-button type="text" size="small" @click="btnFn(row.id,row.state)">

                    {{row.state === 0 ? '开启' : '禁用'}}
                </el-button>
                <el-button
                @click="editBtn(row.id,row.subjectName)"
                type="text"
                :disabled="row.state === 1"
                size="small">修改</el-button>
                <el-button
                @click="delDirectory(row.id)"
                type="text"
                :disabled="row.state === 1"
                size="small">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
      </el-row>

      <el-row :gutter="20" style="margin-top:10px">
        <el-col :span="6" :offset="14">
          <!-- 分页 -->
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pagesize"
            :total="total"
            layout=" prev, pager, next,sizes, jumper">
          </el-pagination>
        </el-col>
      </el-row>

    </el-card>

    <!-- 新增弹框 -->
    <el-dialog
    @open="openDialog"
    :title="curId === true ? '编辑目录' : '新增目录'"
    :visible="isShow"
    @close="closeDialog">
      <el-form :model="form" :rules="rules" ref="myForm">

        <el-form-item label="所属学科" label-width="120px"  >
          <el-select v-model="form.subjectName" placeholder="请选择目录名称" @change="changeValue">
            <el-option
                v-for="item in easyDirectoryList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
        label="目录名称"
        label-width="120px"
        prop="directoryName"
        v-if="!$route.query.id">
          <el-input v-model="form.directoryName" debounce="500"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
// 引入接口
import { list, add, detail, update, remove, changeState } from '@/api/hmmm/directorys'
// 引入处理时间的包
import dayjs from 'dayjs' // ES 2015
export default {
  data () {
    return {
      input: '', // 当前输入框绑定的值
      options: [{
        value: 1, // 选中当前的值
        label: '启用' // 选项的标签，若不设置则默认与 value 相同
      }, {
        value: 0,
        label: '禁用'
      }],
      value: '',
      directoryList: [], // 目录列表数据
      easyDirectoryList: [], // 简单学科目录列表
      total: 0, // 获取到的总数量
      page: 1, // 当前的页数
      pagesize: 10, // 每页显示的条数
      isShow: false, // 控制新增弹框是否显示
      form: { // 新增弹框表单内容
        subjectName: '', // 学科名称
        directoryName: '' // 目录名称
      },
      rules: {
        directoryName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      },
      curId: '', // 当前点击项的id
      subjectId: '', // 学科id
      state: null // 存放当前状态
    }
  },
  async mounted () {
    // console.log(this.$route.query.id)
    if (this.$route.query.id) {
      this.getDirectory()
    } else {
    // 当页面一打开发请求 获取目录数据
      this.getDirectoryList(1, 10)
    }
  },
  methods: {
    // 当下拉菜单的值发生变化时触发该方法  回调参数时当前下拉菜单选中的值
    changeValue (value) {
      this.subjectId = value
    },
    // 定义如果是从学科跳转过来获取数据的方法
    async getDirectory () {
      const res = await list({ page: 1, pageSize: 10, subjectID: this.$route.query.id })
      this.directoryList = res.data.items // table数据
      this.total = res.data.counts
    },
    // 获取目录列表
    async getDirectoryList (page, pagesize, directoryName, state) {
      const res = await list({
        page: page, // 当前页数
        pagesize: pagesize, // 每页几条数据
        // subjectID: subjectID, // 学科ID
        directoryName: directoryName, // 目录名称
        state: state // 状态 1 开启 0 屏蔽
      })
      // console.log(page, pagesize)
      // console.log(res)
      this.directoryList = res.data.items // table数据
      this.total = res.data.counts
    },
    // 定义简单学科列表接口
    // 当弹框打开时
    async openDialog () {
      const res = await simple()
      // console.log(res)
      this.easyDirectoryList = res.data
    },
    // 定义新增接口   => 缺少学科ID
    async addDirectory () {
      if (this.$route.query.id) {
        await add({
          subjectID: this.$route.query.id,
          directoryName: this.$route.query.name
        })
      } else {
        await add({
          subjectID: this.subjectId,
          directoryName: this.form.directoryName
        })
      }
    },
    // 编辑接口   => 缺少学科ID
    async upDirectory () {
      // console.log(this.subjectId)
      await update({
        id: this.curId,
        subjectID: this.subjectId,
        // subjectID: 123,
        directoryName: this.form.directoryName
      })
    },
    // 分页 点击每页多少条
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      // 重新发送请求
      this.getDirectoryList(1, val)
    },
    // 分页  点击页数跳转到当前点击的页数 重新拉取数据
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page = val // 把当前点击的页数设置给page
      this.getDirectoryList(val, this.pagesize)
    },
    // 点击清除按钮  清除输入框
    clearInput () {
      // console.log(this.value)
      // console.log(this.input)
      this.input = ''
      this.value = ''
      // 清除之后重新拉取第一页的数据
      this.getDirectoryList(1, 10)
    },
    // 点击搜索按钮 重新发起请求 刷新页面数据
    searchBtn () {
      if (!this.input && !this.value) {
        // 表示这两个输入框中没有值  提示用户
        this.$message({ type: 'warning', message: '请输入内容后搜索' })
      } else {
        // 表示两个输入框都有值
        // 把这两个输入框中的值作为参数传给 更新数据的接口  重新发起请求 渲染列表
        // 默认第一数据, 十条数据, 学科ID为空 , 目录名称是this.input, 状态是this.value
        this.getDirectoryList(1, 10, this.input, this.value)
      }
    },
    // 点击新增目录
    addDirectorys () {
      // 弹框打开
      this.isShow = true
    },
    // 点击新增弹框的取消
    closeDialog () {
      this.isShow = false
      // 清空表单数据
      this.form = { // 新增弹框表单内容
        subjectName: '', // 学科名称
        directoryName: '' // 目录名称
      }
      // 清空表单校验
      this.$refs.myForm.resetFields()
      // console.log(this.form.subjectName, this.form.directoryName)
    },
    // 点击新增弹框确定按钮
    confirm () {
      this.$refs.myForm.validate((valid) => {
        // 兜底校验
        if (valid) {
          // 判断是在编辑页面还是在新增页面 通过id
          if (this.curId) {
            // 在编辑页面  调用编辑接口
            this.upDirectory()
            // 提示用户
            this.$message({ type: 'success', message: '修改目录成功' })
          } else {
            // 在新增页面 调用新增接口
            this.addDirectory()
            // 提示用户
            this.$message({ type: 'success', message: '新增目录成功' })
          }
          // console.log(this.form.subjectName)
          // 重新拉取数据
          this.getDirectoryList(this.page, this.pageSize)
          // 关闭弹窗
          this.closeDialog()
        }
      })
    },
    // 点击修改按钮
    async editBtn (id, subjectName) {
      this.curId = id
      // 调用获取目录详情接口  回显
      const res = await detail({ id: id })
      // console.log(res)
      this.subjectId = res.data.subjectID
      console.log(res.data.subjectID)
      // 回显
      this.form.subjectName = subjectName
      this.form.directoryName = res.data.directoryName
      // 弹出弹窗
      this.isShow = true
    },
    // 点击删除按钮
    delDirectory (id) {
      // 弹窗显示 询问用户
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 调用删除接口
        await remove({ id: id })
        // 重新拉取数据
        this.getDirectoryList(this.page, this.pageSize)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 定义处理时间的方法
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD')
    },
    // 点击开启或禁用按钮
    async btnFn (id, state) {
      // 调用修改状态的接口
      await changeState({ id: id, state: `${state === 1 ? '0' : '1'}` })
      // console.log(res)
      this.getDirectory()
      // return state === 0 ? '开启' : '禁用'
    }

  }
}
</script>

<style scoped lang='scss'>
.top{
  margin: 14px 0;
  display: flex;
  justify-content: space-between;
  // position: relative;
  .top_left{
    .title{
      margin: 0 15px ;
    }
    .top_ipt{
      width: 200px;
      height: 30px;
      padding: 0 15px;

    }
    .del{
      margin-left:20px;
    }
  }
  // .top_right{
    // position: absolute;
    // top:0;
    // right: 0;
  // }

}

</style>
